import Vue from 'vue'
import Vuex from 'vuex'

// 引入可以发请求的axios
import axios from 'axios'

Vue.use(Vuex)

// 1. state 提供挂载数据的能力
const state = {
  num: 10,
  list: []
}

// 2.0 actions 写业务的函数管理 - dispatch 触发
const actions = {
  async getData({ commit }) {
    const { data } = await axios('/static/movies.json')
    // console.log(data)
    // 通知 mutations 干活，使用形参1解构 commit 方法
    commit('SAVE_LIST', data.subjects)
  },
  // 没有意义的 action ，一般来说 action 对应的都是跟后端的接口请求
  //   addNum({ commit }, n) {
  //     let aa = this.state.num
  //     aa += n

  //     commit('ADD_NUM', aa)
  //   },
  getData1() {
    return new Promise((resolve, reject) => {
      setTimeout(function () {
        resolve(10086)
      }, 2000)
    })
  }
}

// 3.0 mutations 专门存数据，也只有这里的函数有能力操作数据
// mutations 虽然也可以处理异步，但是它没有返回值，操作起来不灵活
const mutations = {
  // 名字是随便取的，但是尽量合乎语义，尽量是大写
  SAVE_LIST(state, arr) {
    state.list = arr
  },
  ADD_NUM(state, val) {
    state.num += val
  }
}

export default new Vuex.Store({
  state,
  actions,
  mutations
})
